<!DOCTYPE html>
<html>
    <head>
        <title>我的个人主页</title>
        <meta charset="utf-8 ">
        <style>
            
            body{
                margin: 0;
                margin-bottom: 100px;
                background-image:url(p999.png);
                background-repeat: repeat;
                z-index: -5;

            }
            #beijing{
                background-image: url(f3.jpg);
                background-repeat:no-repeat;   
                width: 100%;     
                height: 900px;
                margin: 0;
               
            }
            #xiamian{
                width: 800px;
                margin:0 auto;
                
                
               
            }
            #touxiang{
                background-image: url(我的头像.jpg);
                height: 200px;
                width: 200px;
                border-radius: 50%;
                background-size: contain;
                margin: 0 auto;

            }
            #tou{
                background-image: url(p.png);
                height: 500px;
                width: 500px;
                border-radius: 50%;
                background-size: contain;
                margin: 0 auto;
                

            }
            #m{
                text-align: center;
                font-size: 20px;
            }
            
            #touhua{
                top:100px;
                height: 130px;
                width: 200px;
                position: relative;
                /*position: absolute;*/
            }
            .zhuye
            {
               position:relative;               
               top:270px;  
            }
            .zhuyeyingzi
            {
               position:relative;               
               top:250px;
               transform: rotateX(-180deg);
               color: rgba(0,0,333,0.2);
               top:260px;
            }

            h1{
                 font-size: 35px;
                 text-align: center;
                 margin: 0;
                
            }
            h2{
                 text-align: center;
                 
            }
            .tupian{
                width: 100%;
                border-radius: 20%;
            }
           
            #fenge{
                width:100%;
                height: 250px;
            }
            p{
                font-size: 20px;
                text-indent: 2em;
            }
            p:first-letter{
                font-size:35px;
                color: rebeccapurple;
            }
            
            #tx1{
                top:100px;
                left: 5%;
             
            }
            #tx2{
                top:200px;
                left: 38%;  
            }
            #tx3{
                top:100px;
                left: 70%;
            }
            .tx{
                border-radius: 50%;
                width: 200px;
                height: 200px;
                position: absolute;
                box-shadow:5px 5px 10px #a66465;
                z-index: -3;
            }
            #bj{
                width: 100%;
                height: 500px;
                border-radius: 20%;
                background-image: url(f1.jpg);
                margin: 0 auto;
                z-index: -4;
                position: relative;
            }
             #first{
                width: 100%;
                height: 50px;
                /*background-color: palevioletred;*/
                position: fixed;
                margin: 0;
                z-index: 100；
                
            }
            #second{
                width: 100%;
                background-color:black;
                margin: 0;
                text-align: center;
                font-size:50px;
                color:#ffb6aa;
                z-index: 100;
            }
            a:visited{
                color: #a66465;
            }
            a:hover{
                /*background-image: url(我的头像.jpg);*/
                color: aquamarine;
            }
            #dibu{
                font-size:15px;
                text-decoration: none;
                position: absolute;
                border: 1px solid #ffb6aa;
                
                right: 1%;
                bottom:1%;
            }

        </style>

    </head>
    <body>
         <div id="first">
            <div id="second">WELCOME TO MY HOMEPAGE
                <a id="dibu" href="#m">一键到底</a>
            </div>
            
        </div>
        <div id="beijing">
            <h1 class="zhuye">欢迎进入我的主页</h1>
            <h1 class="zhuyeyingzi">欢迎进入我的主页</h1>
        </div>
        <br>
        <div id="touxiang">
            <img id="touhua" src="s1.png" alt="这是我的头像不过没出来">
        </div>
        <div id="xiamian">
            <br>
            <h1>王莹</h1>
            <h1>WangYing</h1>
            
            <img id="fenge"  src="s7.png" alt="这是分割图片">
            
            <h1>MY SCHOOL</h1>
            <h2>郑州大学西亚斯国际学院</h2>
            <h2>SIAS International University</h2>
            <p>郑州大学西亚斯国际学院是由美国西亚斯集团公司投资，与郑州大学合作，美国堪萨斯州富特海斯州立大学（Fort Hays State University，英文缩写FHSU)协办的中外合作办学机构，是河南省首家被国务院学位委员会批准可以实施境外学士学位教育合作项目的全日制本科院校，也是首批被中国教育部中外合作办学评估合格的高校。</p>
            <p>学校位于中国人文始祖黄帝故里河南郑州新郑市，占地面积2200余亩，已建有90余万平方米的风格各异的教学馆舍。欧式现代园林与中国古典园林相结合的校园环境，欧式风格和中国风格相结合的教学楼群，完备的体育、音乐、美术教学场馆设施，既体现了西亚斯中西合璧的办学理念，也彰显了国际化育人环境的时空意识和德、智、体、音、美全面发展的育人思想。置身校园，如穿越于东西方建筑与园林文化的倾情对话之中，中西、古今于一瞬间凝固为立体音乐。青山宁静益智，绿水幽雅润心，给学生创造了浓郁的国际化成长氛围。</p>
            <img class="tupian" src="x1.jpg" alt="这是一张学校照片">
            <h1>MY HOMETOWN</h1>
            <h2>郑州</h2>
            <h2>Zheng Zhou</h2>
            
            <p>郑州，河南省省会，中国中部地区重要的中心城市，国家重要的综合交通枢纽，中原经济区核心城市，地处华北平原南部、黄河下游，居河南省中部偏北，东接开封市，西依洛阳市，南与许昌市、平顶山市接壤，北隔黄河与新乡市、焦作市相望，介于东经112°42′-114°14′、北纬34°16′-34°58′之间。</p>
            <p>郑州是国家历史文化名城，是华夏文明重要发祥地之一，为中华人文始祖轩辕黄帝的故里，历史上曾五次为都、八代为州，是“中国八大古都”之一和世界历史都市联盟成员。全市有世界文化遗产2项15处，全国重点文物保护单位38处43项，拥有黄帝故里、商城遗址、天地之中等众多历史人文景观。</p>
            <img class="tupian" src="zz.jpg" alt="这是一张郑州照片">
            <h1>MY HOBBY</h1>
            <h2>动漫绘图</h2>
            <h2>Cartoon Draw</h2>
            <p>个人爱好动漫绘图，手绘与我们的现代生活密不可分，建筑、服装、插画、动漫……手绘的形式分门别类，各具专业性，对建筑师、研究学者、设计人员等设计绘图相关职业的人来说，手绘设计的学习是一个贯穿职业生涯的过程。手绘培训是一种以手绘技能需求为对象的教育训练，对现代社会设计美学的传承有着不可取代的现实意义。本人擅长绘制动漫卡通人物，自学计算机绘制，临摹以及创新能力强。笔名木曾和风，下面为作品图。</p>
            <img class="tupian" src="hh.jpg" alt="这是一张手绘照片">
            <img class="tupian" src="hh1.jpg" alt="这是一张手绘照片">
            <h2>摄影</h2>
            <h2>Shoot</h2>
            <p>摄影一词是源于希腊语φῶς phos（光线）和 γραφι graphis（绘画、绘图）或γραφή graphê，两字一起的意思是”以光线绘图”。摄影是指使用某种专门设备进行影像记录的过程，一般我们使用机械照相机或者数码照相机进行摄影。有时摄影也会被称为照相，也就是通过物体所反射的光线使感光介质曝光的过程。有人说过的一句精辟的语言：摄影家的能力是把日常生活中稍纵即逝的平凡事物转化为不朽的视觉图像。业余爱好摄影，和朋友共同学习，下面为作品图。</p>
            <img class="tupian" src="sy1.jpg" alt="这是一张摄影照片">
            <h1>MY STUDENT</h1>
            <h2>我的同学</h2>
            <p>同学，又称同窗，是指有共同学习环境的一群学生。可小分为同班同学、同级同学和同校同学等。同学通常指曾经于同一时间在一起学习的人，而并非与自己同时在学的校友，一般比自己较高年级的同学称为学长、学姊，比自己较低年级的同学称为学弟、学妹，一般而言同学友谊比较纯朴，没有重大的利益权力的竞争，因此不少人与同学成为好友，甚至知己、密友。</p>
            <div id="bj">
                <img id="tx1" src="c1.jpg" alt="这是一张陈奕迅" class="tx">
                <img id="tx2" src="c2.jpg" alt="这是一张陈奕迅" class="tx">
                <img id="tx3" src="c3.jpg" alt="这是一张陈奕迅" class="tx">
            </div>
            <img id="fenge"  src="s7.png" alt="这是分割图片">
        </div>
        
        <div id="m">
            <a href="#beijing">返回顶部</a>
        </div>
        <h2>扫一扫有惊喜</h2>
        <div id="tou"></div>
    </body>
</html>